/* eslint-disable no-unused-vars */
<template>
  <div>
    <el-cascader
      ref='cas'
      v-model="value"
      :options="options"
      :props="{multiple: true }"
      @expand-change="expand"
      @change="handleChange"
    ></el-cascader>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orginValue: [],
      orginActivePath: {},
      value: [[1, 3], [1, 4]],
      options: []
    }
  },
  methods: {
    initOptions() {
      this.options = [
        {
          value: 1,
          label: '北京',
          leaf: false,
          children: [
            { value: 3, label: '东城区', leaf: true }, { value: 4, label: '西城区', leaf: true }
          ]
        },
        { value: 2, label: '上海', leaf: false, children: [] }
      ]
    },
    expand(path, nodes) {
      // 展开节点时, 向节点中添加子选项
      // debugger
      // eslint-disable-next-line no-unused-vars
      var level = path.length // 需要展开的节点的层级
      // eslint-disable-next-line no-unused-vars
      var value = path.pop() // 需要展开的节点的值
      setTimeout(() => {
        // debugger
        if (level === 1) { // nodes.value 是选项
          // 调接口, 把省份信息传回去, 收到城市信息, 把城市信息组装成节点列表
          var newnodes = []
          if (value === 1) {
            // 返回北京的内容
            newnodes = [{ value: 3, label: '东城区', leaf: true }, { value: 4, label: '西城区', leaf: true }]
          }
          if (value === 2) {
            newnodes = [{ value: 5, label: '黄浦区', leaf: true }, { value: 6, label: '浦东', leaf: true }]
          }
          var the = this.options.findX([{ value: value }])
          the.children = newnodes
        }
      }, 0)
    },
    handleChange(value) {
      console.log(value)
    }
  },
  created() {
    this.initOptions()
  }
}
</script>
